<template>
	<view class="bg-light" style="height: 100%;">
		<view class="shadow bg-white flex justify-between align-center" style="position: relative; height: 40px;">
			<view class="w-100 flex justify-center">
				<view @click="handleSales" class="font flex align-center font-weight-bold">
					<text :class="sales!='0'?'text-success':''">销量</text>
					<view class="flex flex-column" style="position: relative;">
						<uni-icons style="position: absolute; bottom:-4px;" :color="sales=='1'?'#28a745':''" type="up" size="10"></uni-icons>
						<uni-icons style="position: absolute; top:-7px;" :color="sales=='2'?'#28a745':''" type="down" size="10"></uni-icons>
					</view>
				</view>
			</view>
			<view class="w-100 flex justify-center">
				<view  @click="handlePrice" class="font flex align-center font-weight-bold">
					<text :class="price!='0'?'text-success':''">价格</text>
					<view class="flex flex-column" style="position: relative;">
						<uni-icons style="position: absolute; bottom:-4px;" :color="price=='1'?'#28a745':''" type="up" size="10"></uni-icons>
						<uni-icons style="position: absolute; top:-7px;" :color="price=='2'?'#28a745':''" type="down" size="10"></uni-icons>
					</view>
				</view>
			</view>
			<view class="border-left " style="width: 30px; height: 25px;line-height: 25px; text-align: right; position: absolute;right: 20rpx;">
				<uni-icons @click="handleStyle('1')" v-if="style=='0'" fontFamily="iconfont" size="17">{{'\ue810'}}</uni-icons>
				<uni-icons @click="handleStyle('0')" v-else fontFamily="iconfont" size="20">{{'\uec6b'}}</uni-icons>
			</view>
		</view>
		<scroll-view  @scrolltolower="onReachScollBottom" scroll-y="true" class="w-100" style="height:calc(100vh - 40px)">
			<view v-if="style=='0'" class="flex mx-2 pt-2">
				<view :class="index%2==0?'mr-2':''" class="w-100" v-for="(tableData,index) in colData" :key="index">
					<view @click="handle(item)" class="w-100 mb-2 overflow-hidden bg-white shadow rounded-lg" v-for="(item,i) in tableData" :key="i">
						<image v-if="BASE_IMG" class="w-100" :src="BASE_IMG+item.Picture_URL" mode="widthFix"></image>
						<view class="flex flex-column mx-2">
							<text class="mb-1 font font-weight-bold text-ellipsis-2">{{item.Article_Name}}</text>
							<text class="mb-1 font-sm ">规格:{{item.Specifications_Name}}</text>
							<view class="mb-2 font-sm text-muted flex">
								<text class="text-ellipsis">{{item.Brand_Name}}</text>
								<text class="flex-shrink"> | 剩余数量:{{item.Stock_Remain}}</text>
							</view>
							<view class="mb-2 flex justify-between align-end">
								<money :money="item.Sales_Unit_Price"></money>
								<view @click.stop="handler(item)" class="bg-danger rounded-circle flex align-center justify-center" style="width: 70rpx;height: 70rpx;">
									<uni-icons type="cart" color="#fff" size="22"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="w-100 pt-2">
				<view @click="handle(item)" style="height: 220rpx;" class="flex mx-2 mb-2 overflow-hidden bg-white shadow rounded-lg" v-for="(item,i) in tableData" :key="i">
					<view class="overflow-hidden flex justify-center flex-shrink" style="width: 220rpx;height: 220rpx;">
						<image v-if="BASE_IMG" style="width:220rpx;height: 220rpx;" :src="BASE_IMG+item.Picture_URL" mode=""></image>
					</view>
					<view class="w-100 flex flex-column mx-2" style="position: relative;">
						<text class="w-100 mt-2 mb-1 font font-weight-bold text-ellipsis">{{item.Article_Name}}</text>
						<text class="mb-1 font-sm ">规格:{{item.Specifications_Name}}</text>
						<view class="mb-1 font-sm text-muted flex">
							<text class="text-ellipsis">{{item.Brand_Name}}</text>
							<text class="flex-shrink"> | 剩余数量:{{item.Stock_Remain}}</text>
						</view>
						<view class="mb-2">
							<money :money="item.Sales_Unit_Price"></money>
						</view>
						<view @click.stop="handler(item)" class="bg-danger rounded-circle flex align-center justify-center" style="width: 60rpx;height: 60rpx;position: absolute;bottom: 20rpx;right: 0;">
							<uni-icons type="cart" color="#fff" size="22"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view v-if="tableData.length == 0" class="flex justify-center">
				<image style="width: 100%;" src="../../static/icon/NoneArticle.png" mode="widthFix"></image>
			</view>
		</scroll-view>
		<view class="flex position-fixed flex-column" style="right: 30rpx; bottom: 230rpx;">
			<view class="shadow mt-2 bg-white rounded-circle flex justify-center align-center position-relative"
				style="width: 100rpx; height: 100rpx;" @click="handleBtn()" >
				<i v-if="shopNum > 0" class="bg-danger rounded-circle text-white px-1 position-absolute"
					style="top: -5rpx; left: -5rpx;  font-size: 12px;">{{ shopNum }}</i>
				<uni-icons type="cart" size="24"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex';
	import Base64 from "base-64";
	import money from '@/components/tool/money.vue'
	import { generalPaginationQueryBySQLSerialNumber,generalQueryByTableName,generalQueryBySQLSerialNumber } from "@/api/generalBusiness.js";
	import { addShoppingTrolley } from "@/api/salerOrder.js"
	import { shoppingTrolleyJSON } from "@/static/js/OrderUtil.js"
	export default {
		components:{
			money
		},
		data() {
			return {
				form:{//查询地址
					PaginationNumber:1,
					RowAmount:10,
					SQLSerialNumber:'M_business_daily_execute_unitprice',
					Condition:'',
					ExtensionCondition:'',
				},
				ExtensionCondition:'',
				total:0,//总数
				isReach:true,//是否没到底
				loading:false,//节流
				tableData:[],
				style:'0',
				price:'0',
				sales:'0',
			}
		},
		computed: {
			...mapState(['Open_ID','App_ID','BASE_IMG','shopNum']),
			colData(){
				let arr = [[], []]
				this.tableData.forEach((item, index) => {
				    if ((index + 1) % 2 != 0) {
				        arr[0].push(item);
				    } else {
				        arr[1].push(item);
				    }
				})
				return arr;
			}
		},
		onLoad(options){
			console.log(options);
			//配置参数
			let ExtensionCondition = "";
			if(options.Article_Name){
				ExtensionCondition = ExtensionCondition + " AND business_article_info.Article_Name LIKE '%"+options.Article_Name+"%'";
			}
			if(options.Classify_SerialNumber){
				ExtensionCondition = ExtensionCondition + " AND business_article_classify.Classify_SerialNumber = '"+options.Classify_SerialNumber+"'";
			}
			if(options.Brand_SerialNumber){
				ExtensionCondition = ExtensionCondition + " AND business_article_info.Brand_SerialNumber = '"+options.Brand_SerialNumber+"'";
			}
			if(options.value){
				ExtensionCondition = ExtensionCondition + " AND business_article_info.Article_Name LIKE '%"+options.value+"%'";
			}
			this.ExtensionCondition = ExtensionCondition;
			this.form.ExtensionCondition = Base64.encode(unescape(encodeURIComponent(ExtensionCondition)));
			this.getData(this.form)
		},
		methods: {
			...mapMutations(['modifyShopNum']),
			handle(item){
				uni.navigateTo({
					url:'/pages/index/detail?Supplier_Article_SerialNumber='+item.Supplier_Article_SerialNumber+'&Article_Specifications_SerialNumber='+item.Article_Specifications_SerialNumber
				})
			},
			handleStyle(id){
				this.style = id
			},
			handleSales(){
				if(parseInt(this.sales) < 2){
					this.sales = parseInt(this.sales) + 1 + '';
				} else {
					this.sales = '0'
				}
				console.log(Base64.decode(this.form.ExtensionCondition));
				// this.getData();
			},
			handlePrice(){
				if(parseInt(this.price) < 2){
					this.price = parseInt(this.price) + 1 + '';
				} else {
					this.price = '0'
				}
			},
			handler(item){
				this.generalQueryByTableName({
					TableName: 'business_shopping_trolley',
					Condition: "Row_Status='0' and Open_ID='"+this.Open_ID 
					+ "' and Supplier_Article_SerialNumber='" + item.Supplier_Article_SerialNumber 
					+ "' and Activity_SerialNumber=''"
				},async (data)=>{
					const res = await addShoppingTrolley({
						Data:JSON.stringify(shoppingTrolleyJSON(data,1,this.Open_ID,item.Supplier_Article_SerialNumber,''))
					});
					if(res.Status == 'success'){
						uni.showToast({
							title:'已加入购物车',
							icon:'none'
						})
						const res2 = await generalQueryBySQLSerialNumber({
							SQLSerialNumber:'M_business_shopping_trolley_Quantity',
							Condition:Base64.encode(this.Open_ID),
							ExtensionCondition:''
						})
						if(res2.length == 1){
							this.modifyShopNum(res2[0].Quantity)
						}
					}else{
						uni.showToast({
							title:'系统繁忙',
							icon:'none'
						})
					}
				})
			},
			async getData(form,onReach=false){
				if(!this.loading){
					this.loading = true;
					uni.showLoading({
						title: "加载中...",
					});
					const res = await generalPaginationQueryBySQLSerialNumber(form);
					//判断是否重新开始查询
					if(!onReach) {
						this.form.PaginationNumber = 1
						this.tableData = [];
					}	
					this.tableData.push(...res.Rows);
					this.total = Number(res.TotalRows);
					
					uni.hideLoading();
					this.loading = false;
				}
			},
			onReachScollBottom(){
				if(this.isReach){//是否有剩余数据
					if (this.tableData.length < this.total) {
						this.form.PaginationNumber++;
						this.getData(this.form,true)
					} else {
						this.isReach = false;
					}
				}
			},
			handleBtn() {
				//点击屏幕左侧悬浮按钮或底部"首页"、"客服"按钮后对应操作
				uni.redirectTo({
					url: "/pages/index/shopCart",
				});
			},
			async generalQueryByTableName(Data,callback){//通用查询
				callback(await generalQueryByTableName(Data));
			},
			
		},
	}
</script>

<style>

</style>
